<template>
  <div class="attributeContent">
    <el-card>
      <el-form :inline="true">
        <el-form-item label="一级">
          <el-select :disabled="screen == 0 ? false : true" v-model="oneLeaval" class="m-2" placeholder="Select"
            style="width: 240px">
            <el-option v-for="item in oneOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级">
          <el-select :disabled="screen == 0 ? false : true" v-model="oneLeaval" class="m-2" placeholder="Select"
            style="width: 240px">
            <el-option v-for="item in oneOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="三级">
          <el-select :disabled="screen == 0 ? false : true" v-model="oneLeaval" class="m-2" placeholder="Select"
            style="width: 240px">
            <el-option v-for="item in oneOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- biaoge -->
    <el-card class="box-card">
      <div class="one" v-if="screen == 0">
        <div><el-button :icon="Plus" type="primary" @click="add">添加平台属性</el-button></div>
        <div class="tableContent">
          <el-table v-loading="isLoading" :data="tableData" border stripe>
            <el-table-column type="index" width="55" align="center" label="序号" />
            <el-table-column prop="name" label="属性名称" align="center" show-overflow-tooltip />
            <el-table-column prop="name" label="属性值名称" align="center" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" align="center" width="200">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="handleUpdate(scope.row)">
                  修改
                </el-button>
                <el-popconfirm @confirm="handDeleteRow(scope.row)" @cancel="cancelEvent" title="你确认要删除吗?">
                  <template #reference>
                    <el-button link type="danger" size="small" @click.prevent="">
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="demo-pagination-block">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
            :background="true" :total="total" layout=" prev, pager, next, jumper,->,total, sizes"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
      <div class="two" v-if="screen == 1">
        <el-form :inline="true">
          <el-form-item label="属性名称">
            <el-input v-model="attrParams.attrName" placeholder="请输入属性名称"></el-input>
          </el-form-item>
        </el-form>
        <el-button :disabled="attrParams.attrName ? false : true" :icon="Plus" type="primary"
          @click="addAttribute">添加属性</el-button>
        <el-button type="primary">取消</el-button>
        <el-table border style="margin: 10px 0;" :data="attrParams.attrValueList">
          <el-table-column width="80px" type="index" align="center" label="序号"></el-table-column>
          <el-table-column label="属性值名称">
            <template #="{ row, $index }">
              <el-input :ref="(vc:any) =>inputArr[$index] = vc" v-if="row.flag" @blur="toLook(row,$index)" v-model="row.valueName" placeholder="请输入属性值名称"></el-input>
              <div v-else @click="toEdit(row)">{{ row.valueName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #="{ row, index }">
              <el-button type="danger" :icon="Delete" @click="attrParams.attrValueList.splice(index,1)" />
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="save" :disabled="attrParams.attrValueList.length>0? false: true">保存</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { Plus, Delete } from "@element-plus/icons-vue";
import { ref, reactive, onMounted, nextTick } from 'vue';
import { brandList, brandDeteleList, reqAddOrUpdateAttr } from "../../../api/product/brand";
import { Records } from "../../../api/product/brand/type";
import { ElMessage } from "element-plus"


interface AttrValue {
  id?: number,
  valueName: string,
  attrId?: number,
  flag: boolean,
}
type attrValueList = AttrValue[]
interface Attr {
  id?: number,
  attrName: string,
  attrValueList: attrValueList,
  categoryId: string,
  categoryLevel: number,
}
//
const attrParams = reactive<Attr>({
  attrName: "",
  attrValueList: [],
  categoryId: "",
  categoryLevel: 3,
})
//失去焦点执行方法
const toLook = (row: any, $index: number) => {
  //非法情况1
  if(row.valueName.trim() == ''){
    attrParams.attrValueList.splice($index,1)
    ElMessage({
      type: "error",
      message: "属性值不能为空"
    })
    return
  }
  //非法情况2
  let repeat = attrParams.attrValueList.find((item)=>{
    if(item != row){
      return item.valueName === row.valueName
    }
  })
  //将重复
  if(repeat){
    attrParams.attrValueList.splice($index,1)
    ElMessage({
      type:'error',
      message: "属性值不能重复"
    })
    return
  }
  row.flag = false;
}
//点击时执行方法
const toEdit = (row: any) => {
  row.flag = true;
}
const inputArr = ref<any>([]);
//添加属性
const addAttribute = () => {
  // Object.assign(attrParams, {
  //   id: "",
  //   attrName: "",
  //   attrValueList: [],
  //   categoryId: "",
  //   categoryLevel: 3,
  // })
  screen.value = 1;
  attrParams.attrValueList.push({
    valueName: '',
    flag: true
  })
  nextTick(()=>{
    inputArr.value[attrParams.attrValueList.length - 1].focus()
  })
}
//baocun
const save = async () => {
  let result = (await reqAddOrUpdateAttr(attrParams)) as any;
  if (result.code == 200) {
    screen.value = 0;
    ElMessage({
      type: 'success',
      message: attrParams.id ? "修改成功" : "新增成功"
    })
  } else {
    ElMessage({
      type: 'error',
      message: attrParams.id ? "修改成功" : "新增成功"
    })
  }
}
//场景接切换
const screen = ref<number>(0)
onMounted(() => {
  initData()
})
const oneLeaval = ref('');
const oneOptions = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }]
const isLoading = ref(false)
const tableData = ref<Records>([
  {
    logoUrl: '2016-05-03',
    name: 'Tom',
  },
  {
    logoUrl: '2016-20-03',
    name: 'fd',
  },
])
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);
//请求列表
const initData = async () => {
  let params = {
    pageSize: pageSize.value,
    currentPage: currentPage.value
  }
  const data = (await brandList(params)) as any;
  if (data.code == 200) {
    tableData.value = data.records;
    total.value = data.total;
  }
}
// 分页
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};
//添加品牌
const add = () => {
  screen.value = 1
}
//表格编辑
const handleUpdate = (row: any) => {
}
//品牌取消删除
const cancelEvent = () => {
  ElMessage({
    message: '取消删除',
    type: 'warning'
  })
}
//品牌删除
const handDeleteRow = async (row: any) => {
  console.log(row, '删除')
  let data = (await brandDeteleList(row.id)) as any;
  if (data.code == 200) {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    initData();
    // initData(tableData.value.length > 1 ? currentPage.value : currentPage.value - 1 );
  }
}
</script>
<style>
.box-card {
  margin: 10px 0;
}
</style>